<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备标签-->
        <div class="box">前端好玩</div>
        <div id="box1">id选择器</div>
        <p>你好p标签</p>
        <p class="xp">有类名的x</p>
        <div id="boc">
            <h1>div里的h1</h1>
        </div>
    
</body>
<script>
    //获取网页元素：querySelector()和querySelectorAll()
    //做认识：getElementById()、getElementByTagName()、getElementByName()、getElementByClassName()、
    // let const
    //querySelector('选择器名字')只会获取第一个元素：选择器可以说标签选择器、类选择器（.类名）和ID选择器（#ID名）
    const elm1 = document.querySelector('div');    //通过标签选择器得到元素
    console.log(elm1);
    const elm2 = document.querySelector('#box1');    //通过ID选择器得到元素
    console.log(elm2);
    const elm3 = document.querySelector('.xp');     //通过类选择器得到元素
    console.log(elm3);
    const elm4 = document.querySelector('#boc p li:nth-child(5)');     //复合选择器
    console.log(elm4);

    
    const em1 = document.querySelectorAll('div');   
    console.log(em1);     //伪数组
    for(let i=0;i<em1.length;i++){
        console.log(em1[i]);
    }
    em1[2].style.color = 'pink';
</script>
</html>